import React, { Component } from 'react'
// import axios from 'axios'
import request from '../../util/request'
import {NavLink,Switch,Route,Redirect} from 'react-router-dom'

import AreaManger from './areaManger'

import Home from './home'

import MyOrder from './myOrder'

import OrderApproval1 from './orderApproval1'

import OrderApproval2 from './orderApproval2'

import OrderRoom from './orderRoom'

import RoomManger from './roomManger'

import RoomOrderManger from './roomOrderManger'

import SetCom from './set'

import IsLogin from '../../util/isLogin'

class Main extends Component {
    state = {
        visible:false,
        menulist:[]
    }

    componentDidMount(){
        request.get('/api/menulist',{role_id:localStorage.getItem('role_id')}).then(res => {
            if(res.code === 1){
                this.setState({
                    menulist:res.data
                })
            }
        })
    }
    render() {
        let {visible,menulist} = this.state;
        return (
            <div className="wrap">
                <header>
                    {localStorage.getItem('username')}-{localStorage.getItem('role_name')}
                    <button onClick={this.show}>退出</button>
                </header>
                <div className="con">
                    <div className="left">
                        {menulist.length && menulist.map(item => <NavLink key={item.res_router} to={'/main'+item.res_router}>{item.res_name}</NavLink>)}
                    </div>
                    <div className="right">
                        <Switch>
                            <Route path="/main/home" component={Home}></Route>
                            <Route path="/main/orderRoom" component={OrderRoom}></Route>
                            <Route path="/main/myOrder" component={MyOrder}></Route>
                            <Route path="/main/orderApproval1" component={OrderApproval1}></Route>
                            <Route path="/main/roomOrderManger" component={RoomOrderManger}></Route>
                            <Route path="/main/roomManger" component={RoomManger}></Route>
                            <Route path="/main/areaManger" component={AreaManger}></Route>
                            <Route path="/main/set" component={SetCom}></Route>
                            <Route path="/main/orderApproval2" component={OrderApproval2}></Route>
                            <Redirect from="/" to="/main/home"></Redirect>
                        </Switch>
                    </div>
                </div>
                <div className="dialog" style={{display:visible?'block':'none'}}>
                    <h1>消息</h1>
                    <div>确认退出吗？</div>
                    <div>
                        <button onClick={this.cancel}>取消</button>
                        <button onClick={this.exit}>确定</button>
                    </div>
                </div>
            </div>
        )
    }

    //退出
    show = () =>{
        this.setState({
            visible:true
        })
    }

    //取消
    cancel = () =>{
        this.setState({
            visible:false
        })
    }

    //退出
    exit = () => {
        //1.弹窗关闭
        //2.回到登录界面
        //3.删除本地存储
        localStorage.clear();
        this.cancel();
        this.props.history.push('/login');
    }
}

export default IsLogin(Main)